<template>
	<statusBarVue title="发表话题" :isShowBar="true" :isShowLeft="true" />
	<view class="editing-topic-page" :style="pageHaveBarStyle">
		<view class="editing-topic-group">
			<uni-forms ref="form" :model="formData" :rules="rules" label-position="top" class="form">
				<view class="chunk">
					<uni-forms-item label="标题" name="title" required>
						<uni-easyinput v-model="formData.title" placeholder="请输入" primaryColor="#22A366" />
					</uni-forms-item>
				</view>
				<view class="chunk" v-for="(item,index) in dynamicLists" :key="'dynamicLists-' + index">
					<uni-forms-item required :rules="item.rules" :name="'domains[' + item.id + ']'"
						v-if="item.type === 0">
						<template v-slot:label>
							<view class="chunk-item-label">
								<view>
									<text class="is-required">*</text> 文本
								</view>
								<button class="del" type="default" @click="del(item.id)">
									删除
								</button>
							</view>
						</template>
						<view class="form-item">
							<uni-easyinput class="input" type="textarea" maxlength="2000" autoHeight
								v-model="formData.domains[item.id]" placeholder="请输入内容(2000个字以内)" primaryColor="#22A366" />
						</view>
					</uni-forms-item>
					<uni-forms-item required :rules="item.rules" :name="'domains[' + item.id + ']'"
						v-if="item.type === 1">
						<template v-slot:label>
							<view class="chunk-item-label">
								<view>
									<text class="is-required">*</text> 配图
								</view>
								<button class="del" type="default" @click="del(item.id)">
									删除
								</button>
							</view>
						</template>
						<view class="form-item">
							<uni-file-picker :limit="1" v-model="formData.domains[item.id]" fileMediatype="image"
								mode="grid" @select="select($event,item.id)" />
						</view>
					</uni-forms-item>
				</view>

			</uni-forms>
		</view>
		<view class="editing-topic-group  add-type-btns">
			<button @click="handleOpenTopicPage(0)">新增文本</button>
			<button @click="handleOpenTopicPage(1)">新增配图</button>
		</view>

		<view class="editing-topic-group add-btns">
			<!-- style=""  -->
			<button :disabled="!dynamicLists.length" :style="dynamicLists.length ? addBtnsStyle : {}"
				@click="handlePushTopic">发布</button>
		</view>
	</view>
</template>

<script>
	import statusBarVue from '@/components/statusBar.vue';

	import {
		publics
	} from '@/mixins/publics.js';

	import {
		postAddForum
	} from "@/utils/api"

	import tool_oss from '@/utils/oss';

	export default {
		mixins: [publics],
		components: {
			statusBarVue
		},
		data() {
			return {
				fid: '',
				formData: {
					domains: {}
				},
				addBtnsStyle: {
					color: '#ffffff',
					backgroundColor: '#22A366'
				},
				dynamicLists: [],
				addBtnDisabled: true,
				contentType: null,
				contentTypeList: [{
						text: '文本',
						value: 0
					},
					{
						text: '配图',
						value: 1
					}
				],
				KeyboardHeight: 0,
				rules: {
					title: {
						rules: [{
							required: true,
							errorMessage: '标题不能为空',
						}]
					}
				}
			};
		},
		onLoad(options) {
			if (options.fid) {
				this.fid = options.fid;
			}
		},
		methods: {
			handleOpenTopicPage(type) {
				this.contentType = type;
				this.add();
			},

			handleOnFocus() {
				uni.onKeyboardHeightChange(res => {
					this.KeyboardHeight = res.height
				})
			},

			add() {
				const type = this.contentType,
					length = this.dynamicLists.length;

				this.dynamicLists.push({
					label: type === 0 ? '文本' : '配图',
					type,
					rules: [{
						'required': true,
						errorMessage: '请输入'
					}],
					id: type === 0 ? 'content-' + length : 'href-' + length
				});

				this.contentType = null;
			},
			del(id) {
				let index = this.dynamicLists.findIndex(v => v.id === id)
				this.dynamicLists.splice(index, 1)
			},
			// 提交 Api
			postAddForumApi(postData) {
				postData.fid = this.fid;
				postAddForum(postData).then(res => {
					if (res.code === 200) {
						uni.navigateBack();
					}
				});
			},
			// 提交
			handlePushTopic() {
				let postData = {},
					contents = [];
				this.$refs.form.validate((err, formData) => {
					if (!err) {
						this.dynamicLists.map(item => {
							let obj = {};
							obj.content_type = item.type
							if (item.type === 0) {
								obj.content = formData.domains[(item.id)];
								obj.href = '';
							} else if (item.type === 1) {
								obj.content = '';
								obj.href = formData.domains[(item.id)].url;
							};
							contents.push(obj);
						})

						postData.title = formData.title;
						postData.contents = contents;
						this.postAddForumApi(postData)
					}
				});
			},
			// 获取上传状态
			select(e, key) {
				tool_oss.oss.upload(e.tempFiles).then(res => {
					this.formData.domains[key] = res.fileUploadSuccessObj;
				});
			},
		}
	};
</script>

<style lang="scss">
	.editing-topic-page {
		position: fixed;
		left: 0;
		right: 0;
		box-sizing: border-box;
		padding: 24px 12px;
		background: linear-gradient(to bottom, transparent 0%, white 20%, white 100%);
		overflow-x: hidden;
		overflow-y: auto;

		.editing-topic-group {
			width: 94.67vw;
			margin: 0 auto 15px;

			.chunk-item-label {
				height: 28px;
				padding-bottom: 8px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.is-required {
					color: #dd524d;
					font-weight: bold;
				}

				.del {
					margin: 0;
					line-height: 1.5;
					background: #f85653;
					color: #fff;
				}
			}

			&.add-type-btns {
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
		}
	}
</style>